Overview of Beerwin`s PlainHtml 3.5

Beerwin's PlainHtml Help

Beerwin's PlainHtml 4 Overview

Beerwin's PlainHtml 4 is a powerful MDI text editor with HTML editing capabilities and extras, such as code snippets, syntax highlighting and more. Freeware. Copyright © Nagy Ervin, Beerwin's World of Stuff, 2004-2007

Contact me:
http://www.beerwin.com
beerwin@xenzor.ro
ervinsmail@yahoo.com
nagyervin.bws@gmail.com

System requirements

Configuring

Toolbars

  • Standard

  • Common

  • HTML

  • Insert

  • Format

  • Forms

  • Characters

  • Tables

  • Media

  • PHP/MySQL

  • Data

  • Tools

Keyboard shortcuts

Using:

Previewing from localhost

Opening and using references

Opening and using code Snippets

Inserting Meta data(HTML page header)

Extending PlainHtml


Configuring PlainHtml

Beerwin's PlainHtml Help

Configuration

Beerwin's PlainHtml 4 configuration is an essential part of it's installation. This one must be done manually for optimal performance.

Setting preview from localhost:

Click Tools > Options...
Click View in browser tab
If you have Apache webserver installed on your computer, mark the checkbox and update the two fields with your corresponding data(Apache htdocs directory with full path, and a custom directory in it(optional)). Please note, that if you do'nt have Apache installed on your computer, this option must be disabled. In disabled state, server side scripts will not be executed, and because of this, php pages will not be displayed properly.
Click OK

Setting PHP error Check:

On the view in browser tab mark the Show PHP errors checkbox. Browse for your PHP error log . Read more at PHP Error Check topic (Previewing from localhost subtopic)

Configuring the Code Editor:

This one can be done with the Code Editor, Syntax highlighter and Gutter tabs on the Options dialog. Try any combinations on the dialog box to find the best look and functionality.

Updating the user information:

Since the program is completely free, no registration and serial number is required for full functionality, but you can support it by sending code snippets, Delphi components, delphi codes to the beerwin@tvn.hu e-mail adress.
Just update the fields on the User information tab in the Options dialog and click OK.

Configuring the Browser List:

Click Tools > Configure Browserlist...
To remove a browser, just select it's name and click remove.
To add a new browser, just click Add and browse for the new browser's executable.

Configuring External Tools List:

Click Tools > Configure External Tools...

To add a new tool, click Add and browse for the desired application.
To remove a tool, click Remove
To edit a tool, click Edit, and you cen modify it's data.
There is also a possibility to run those tools by clicking Run Selected

It is recommended to reconfigure those tools after PlainHtml 3's installation is complete. Update their path with the browse button.


System requirements

Beerwin's PlainHtml Help

System requirements

Beerwin's PlainHtml 4 needs the following configuration for run:
Hardware:

  • Intel Pentium III CPU with 600MHZ

  • 128MB RAM

  • Least 1024 x 768 x 16mil. colours

Software:

  • Microsoft Windows XP for optimal performance

  • Ie 5.5 or later(IE 6 recommended)

  • Latest ActiveX patches

  • Due to customized ActiveX browser preview, you may activate your firewall and/or virus cleaner/ spyware remover (the integrated preview can access online pages an may elude default IE protection measures, due to it’s custom parts)


PlainHTML Features

  • Smooth and easy-to-use interface
  • Startpage and internal webbrowser - Accessible only when no documents are opened
  • Powerful and customizable editor
  • Multiple Syntax highlighting
  • Word Wrap(with indicator glyph), Token Matching
  • Page and code Templates
  • Programming references
  • Code Snippets
  • Integrated IE preview
  • Internal HTML Tag Stripper
  • Document list with open and load capability
  • Customizable toolbars
  • Tag Lists
  • Lots of useful external tools
  • Navbar Generator
  • Joomla! Template Toolbar
  • Integrated password generator
  • Full entity set
  • Internal Table Layouts
  • Multiple undo and redo levels
  • Undo/Redo on saved but not closed documents
  • Preview in default/custom browsers
  • Preview from Localhost, with PHP error check - needs Apache abd PHP installed for this
  • HTML validating with HTML Tidy
  • Extender
  • and so on...


Keyboard Shortcuts

Beerwin`s PlainHtml Help

Keyboard Shortcuts

Beerwin's PlainHtml 4 contains the following keyboard shortcuts:.

This list is far from to be complete, so please check out the menus. These shortcuts are only for the very common features

Command / tool | Shortcut
New | Ctrl+N
Open... | Ctrl+O
Save | Ctrl+S
Close document | Ctrl+F4
Exit | Alt+F4
Help | F1
Undo | Ctrl+Z
Cut | Ctrl+X
Copy | Ctrl+C
Paste | Ctrl+V
Select All | Ctrl+A
Find | Ctrl+F
Find Next | F3
Replace | Ctrl+R
Preview in default browser | F12
Preview in custom browser | Alt+F12
Font | Ctrl+T
Bold | Ctrl+B
Italic | Ctrl+I
Insert Tag | Ctrl+Alt+G
HTML skeleton code | Ctrl+Alt+H
Meta data | Ctrl+Alt+M
Floating frame | Ctrl+Alt+I
Script | Ctrl+Alt+R
Form | Ctrl+Alt+F
Table | Ctrl+Alt+T
Table layouts | Ctrl+Alt+L
Special characters | Ctrl+Alt+C
Hyperlink | Ctrl+L
Image | Ctrl+J
Navbar generator | Ctrl+Alt+V
Div tag | Ctrl+Alt+D
Events | Ctrl+Alt+E
Save All... | Ctrl+Shift+S
Close All | Ctrl+Shift+F4
Word Wrap | Ctrl+Alt+W


Creating documents from templates

Click File > From template
Select the desired template and click OK
Enter/select directory where your project should be saved
Click OK. Your new project is created and opened in a new tab.


Saving and loading window list (workflow)

You have now the possibility to save the list of currently opened documents, in order to reopen all of them later by two clicks.
Click Window-> Save window list

You can, of course reload this list back, by clicking on Window->Load window list


Using the Quick Tag List

The Quick Tag List is the Tag list on the Right Side Bar.
The default list is the HTML tags. Double click on an item to insert it into the document at the cursor position.
Change the list by selecting another from the dropdown over the list.

Quck tag lists:
  • HTML Tags
  • PHP vars
  • MIME types
  • !DOC types
  • Entities
You can add more lists to this one by downloading new lists form Beerwin's World of Stuff homepage(http://www.beerwin.com) and installing them with Extender.


Using the color picker

The color picker got a lot of enhancements with version 4:

1. The All Colors tab is the already known picker
2. The WebSafe Color Tab was introduced in 3.7.2.2960 (Version 4 RC1)
3. The Windows OS Tab was introduced in 3.7.2.2960 (Version 4 RC1)
4. The Mac Os Tab was introduced in 3.7.2.2960 (Version 4 RC1)
5. The GrayScale Tab was introduced in 3.7.2.2960 (Version 4 RC1)

All tabs work in the same way(just click on the color palette and you will get the color instantly)

Custom palette: Introduced in version 4.0 final
Selecting a color from the custom palette: just click on a color in the listbox.
Custom Palette Organizer: introduced in 4.0 final

Custom palette: listbox with colors, which is saved after any modification
Adding a color to it: Select a color and click on "Save to custom palette"
Deleting a color: Click on the Delete [image] button on the toolbar on top of the list (The Organizer bar)
Moving a color up/down: Click on the Up [image] or the Down [image] button on the Organizer Bar
Saving a palette: Click on the "Save palette" [image] button on the Organizer Bar
Loading a palette: Click on the "Load palette" [image] button on the Organizer bar


Using and opening References

Opening the references

Click View -> References and select one reference from the left side list. Just navigate as in Internet Explorer


Using and opening Code Snippets

Opening the Code Snippets

Click View -> Code Snippets

In the Snippets window there are 2 tabs: the first for default built-in code snippets “PlainHtml snippets” and the second tab with updateable snippets “My snippets”.

1. Insert button works only for “PlainHtml snippets” tab

2. Navbar generator can save navbars to the “My snippets” tab


(Untitled)

The Standard toolbar:

The standard toolbar is the general toolbar, containing the New, Open..., Save, etc. common application functions. Special button included in this toolbar is the 'Preview in default browser ' [image] button. This works in two ways, depending on the Apache support (Preview from LocalHost) status. If it is enabled, previews documents from the Apache server, otherwise previews documents from their normal path.


(Untitled)

The Side Bar:

This toolbar is at the right side of the main window and contains a quick preview button(previews in the editor), a Code Snippets button (brings up Code Snippets window), a Reference button (just a few lessons about HTML, PHP and CGI), a Tools dropdown with a list of the currently configured external tools.

There is also a color grid for quick selecting and inserting hexa colors. The rounded shape brings up the Color Picker when clicked.

The lowest item is the Tag List, with a dropdown list selector. Select the proper tag list from it (HTML tags, PHP vars system, Document types(!DOCTYPE), MIME types). Just double click on an item in the list and it will be inserted into the code


Toolbars

Beerwin`s PlainHtml Help

Toolbars

Beerwin's PlainHtml 4 has the following toolbars:

By default, all toolbar items are in the same order as enumerated in help file.

Standard

Common

HTML

Insert

Format

Forms

Characters

Tables

Media

PHP/MySQL

Data

Tools


(Untitled)

Common Tools:

Contains the most basic tags for creating a simple web page with a few advanced features, such as a DHTML navbar generator and Flash object insertion.
Buttons:

  • HTML skeleton code: creates the HTML document structure. Has preconfigure dialog

  • Meta data and additional header information. Preconfigurable. More...

  • Hyperlink. Preconfigurable

  • Floating frame (iframe). Preconfigurable

  • Form tag. Preconfigurable

  • Comment. Preconfigurable. Comments out selected code or creates empty comment

  • Image. Preconfigurable

  • Table. Preconfigurable

  • Font. Preconfigurable. Applies font settings for selected text or creates empty font tag

  • Line Break

  • Navbar Generator. Inserts navbar generated in it. Can save generated navbar in My Snippets

  • Flash object. Shows open dialog for browsing and embeds selected flash


(Untitled)

HTML Tools:

Basic and advanced html tags:

  • HTML skeleton code

  • Meta data

  • Floating frame

  • Noframes. This one will be shown by browsers that do not support frames

  • Script. Preconfigurable. Inserts script and noscript tags.

  • Noscript. insert noscript tag for browsers that do not support any scripts

  • Server side include. creates an include for server side scripts.


inserting meta data

Inserting Meta data(HTML page header)

Click Insert -> HTML -> Meta Data (alternatively click Meta Data button on the `HTML` or `Common` tabs)

You are presented with a multi-paged dialog, but this dialog can apply only for one of it’s pages at the same time, so if you want to apply for all the six types of meta data on the dialog, you have to do it for each of the pages separately.


(Untitled)

Insert Toolbar:

  • Tag. Tag picker and quick tag editor.

  • Hyperlink

  • E-mail link. preconfigurable

  • Named anchor. preconfigurable

  • Horizontal rule. Preconfigurable

  • Navbar generator

  • Image

  • Noframes

  • Tables

  • Comment

  • Div. Preconfigurable. If all fields are filled out correctly, layer will be created.

  • Events. Assigns events to any tag.


(Untitled)

Format Toolbar:

Text formatting tools:

  • Font

  • Bold. Applies directly to the selected text, or creates an empty <b></b> tag

  • Italic. Applies directly to the selected text, or creates an empty <em></em> tag

  • Centered block. Centers selected block or creates a new empty CENTER tag

  • Blockquote / indent: Indents selected or creates new empty BLOCKQUOTE tag

  • Headings. headings can be set for selected text or creates a new heading

  • Paragraph. Preconfigurable

  • PRE. Applies preformatted text

  • Line break

  • Ordered list

  • Unordered list


(Untitled)

Forms toolbar:

For creating web forms:

  • Form properties

  • Select (dropdown Menu/list)

  • Textarea(Text field)

  • Input type(textbox, button, and others)

  • Fieldset (with legend)

  • Label


(Untitled)

Characters:

For inserting special characters (entities) .

  • a few selected items(used in most document)

  • A full picker


(Untitled)

Tables:

For creating tables:

  • Table

  • Table Header (TH)

  • Table Data (TD)

  • Table Row (TR)

  • Table Layouts. loads from precreated tables. Extendable with Extender


(Untitled)

Media:

For inserting media in your HTML documents:

  • Flash object

  • Shockwave object

  • Applet

  • ActiveX

  • Param (object parameters)

  • Embed (plugin)


(Untitled)

PHP/MySQL:

Inserts most common PHP/MySQL tags into your document

  • Php Start and end tags

  • Include statement

  • Parameter readers

  • Queries(SQL)

  • MySQL connection

  • Empty Function


(Untitled)

Data

This toolbar contains a built-in password generator, the Strip HTML tags utility and the Joomla! template toolbar


(Untitled)

Previewing from localhost

  1. On the main menu bar click Tools -> Options

  2. Mark the "Preview from Localhost" checkbox - the other controls will become available

  3. Select your web server's root document root directory - eg. If you have installed Apache 2 webserver on your machine, the root directory may look like this: C:\Program Files\Apache Group\Apache2\htdocs

  4. Now select a subdirectory from this directory by clicking the "Browse" button, or if there is no subdirectory, just click "Create directory...". In the "Make Directory" dialog type in a directory name and click OK. Click "Browse" and select it.

  5. Click OK.

Your settings will be saved after you quit PlainHtml, but they are already applied for current session too.

With this option enabled, the default web browser will open your file from localhost (http://localhost/yourdirectory/yourfile)

Specify different directory when you begin to work on a new project. The subdirectory may be changed when you have to open a file from another project otherwise files may be overwritten. PlainHtml will not ask you about overwriting a file.

Without a webserver installed on your computer this option must be disabled, otherwise preview with default browser/preview with custom browser will not work.


Checking PHP scripts for errors

PHP error check works together with the APACHE support, but it can be turned on/off without turning off apache support. If Apache support is disabled, PHP error checking is disabled too.

Configuring PHP error check:
1. You must have PHP and Apache installed on your computer (and loaded).
2. Configure your PHP to log errors in a file (Refer to PHP documentation or the config file * PHP.INI * for how to do this - PHP.ini contains all comments needed to configure it properly). There is a directive, called error_log this directive's value is the error log file name with full path.
3. In PlainHTML configuration, go to the "View in browser" configuration.
4. If Preview from localhost is not configured, mark the "Preview from localhost" checkbox and follow instructions stated in Previewing from localhost (Apache Support).
5. Mark the "Show php errors..." checkbox
6. Specify PHP error log file's name with full name. (or browse for it with the small yellow button)
7. Click OK


Validating HTML

Switch to the document that you want to validate

Click Tools -> Validate HTML

You will get the eventual (error) messages in the listbox at the bottom of the window. By clicking on a Warning/Error message line, the caret will be moved to the line containing the specified error in the message


Extending PlainHtml

1. Download PlainHtml extensions from Beerwin`s World of Stuff (http://beerwin.tvn.hu) They are available in zipped format.

2. Extract zip file contents to an empty directory

3. Launch extender.exe from PlainHtml main directory

4. Click Extensions -> Install extension

5. In the browse dialog: go to the directory where the unpacked extension is and select the .BWX file and click OK

6. Click Install.

Installation is complete with this, you can close the Extender.

If you want to test the already installed extensions, click Extensions -> Test. This will open the Tester. There is an Extensions menu too. Any of it’s items represent an extension. If there is no error message, the extension is working.

In PlainHtml, extensions can be accessed at: Insert -> Other or

the toolbar above the Editor

Installing Tag lists

1. Start Extender
2. Click Tag Lists tab
3. Browse for your new tag list file and click Open
And this is it.
Uninstall: Select the desired tag list and click uninstall.

Installing table layouts

1. Start Extender
2. Select table layouts tab
3. Click Open.
4. Browse for your new layouts bwx file and click OK
5. Move all items from the left list to the right list
6. Click Install;
7. On the small progress window click Start copying.
8. When finished, click Done.

Table layouts cannot be uninstalled


Issues

1. Toolbar buttons may disappear in some situations(extremely rare - when PlainHtml is not closed in a normal way).
Problem source: The actions.st file in PlainHtml's main directory is corrupted.
Fix: Delete the actions.st file. Your customizations will be lost. Start PlainHtml and the buttons will be reset to default, but customization will not be possible before you restart PlainHtml.

Other issues: if you find any problem, reproduce it, and send me the error message, the command that generated it, and a screenshot of the program to the beerwin@xenzor.ro e-mail address. (Notice: T-mobile, gmail mail addresses may not send the message to this address - they will send to nagyervin.bws@gmail.com, ervinsmail@yahoo.com)